<template>
  <el-menu :style="{ width: !isCollapse ? '230px' : '64px' }" active-text-color="#ffd04b" background-color="#545c64"
    class="el-menu-vertical-demo" text-color="#fff" @open="handleOpen" @close="handleClose" :collapse="isCollapse"
    :default-active="active">
    <p class="logo-lg">{{ isCollapse ? '阳光' : '阳光陪诊' }}</p>
    <TreeMenu :index="1" :menuData="menuData" />
  </el-menu>
</template>

<script setup>
import TreeMenu from './treeMenu.vue';
import { useRouter } from 'vue-router';
import { reactive, computed } from 'vue';
import { useStore } from 'vuex';

const router = useRouter();
const store = useStore();
// const menuData = reactive(router.options.routes[0].children);
const menuData = computed(() => store.state.menu.routerList);
const isCollapse = computed(() => store.state.menu.isCollapse);
//定义菜单高亮
const active = computed(() => store.state.menu.menuActive);

const handleOpen = () => { }
const handleClose = () => { }
</script>

<style lang="less" scoped>
.aside-container {
  /* width: 200px; */
  height: 100%;

}

.logo-lg {
  font-size: 20px;
  text-align: center;
  height: 50px;
  line-height: 50px;
  color: #fff
}
</style>